Multimedia

CSS - pseudo-klassen

Doelstelling

1. In deze les leren we hoe je met selectoren interactieve webpagina's kan maken.
2. In het bijzonder leren we de techniek om een SPA te maken, oftewel een Single Page Application.
3. Nu worden alle gedichten getoond. Als de bezoeker een gedicht selecteert, springt de pagina naar het geselecteerde gedicht. Maar het menu en de header springen ook naar boven. Om een ander gedicht te kunnen selecteren moet de bezoeker terug naar boven scrollen. We willen de webpagina zo wijzigen dat als de bezoeker een gedicht selecteert, alleen het geselecteerde gedicht getoond wordt zodat het menu en de paginaheader zichtbaar blijven.

Leerpad

1. We gaan verder met CSS selectoren en in het bijzonder:
   1. de klasse-selector;
   2. de algemene verwantschapselector;
   3. de :target selector;

Oefening

1. Open je Cloud9 workspace.
2. Maak een map met de naam pseudo-klassen.
3. Kopiëer de bestanden uit de map van de vorige les naar de pseudo-klassen.
4. Stap voor stap wordt de oefening uitgelegd in Met de :target pseudo-klasse kan je een element opmaken dat de target is van een interne hyperlink op een webpagina.
5. In het filmpje De target pseudoklasse kan je stap voor stap volgen hoe je de oefening maakt.

Opdracht

1. Je werkt in de submap met de naam pseudo-klassen waarin je alle bestanden uit de vorige les gekopieerd hebt.
2. Pas de techniek, die je in de oefening geleerd hebt, toe op je eigen webpagina.
3. Maak de opdracht in Visual Studio Code lokaal en kopieer de map naar Cloud9.
4. Download de map met de naam pseudo-klassen van Cloud9 en stuur ze op via onderstaande link.